// 自定义input键盘

const componentBehavior = require('../../js/common/ComponentBehavior')
const { calculation } = require('../../js/common/math')
const { getSystemInfoSync, alert } = require('../../js/newUtil')

Component({
  /**
   * 使自定义组件有类似于表单控件的行为
   */
  behaviors: ['wx://form-field', componentBehavior],
  /**
   * 外部class样式
   */
  externalClasses: ['component-class'],
  /**
   * 组件的属性列表
   */
  properties: {
    value: { // input值
      type: String,
      value: 0,
    },
    placeholder: { // 类似input placeholder，占位内容
      type: String,
      value: '请输入内容'
    },
    placeholderStyle: { // 类似input placeholder style,占位内容样式
      type: String,
      value: ''
    },
    min: { // 可输入最小值
      type: Number,
      value: 0
    },
    max: { // 可输入最大值
      type: Number,
      value: 999999
    },
    disabled: { // 是否不可用
      type: Boolean,
      value: false
    },
    handleTap: { // 是否存在点击时触发的方法
      type: Boolean,
      value: false
    },
    autoFocus: { // 是否自动获取焦点
      type: Boolean,
      value: false,
    },
    resetData: { // 每次点击打开时是否重置数据
      type: Boolean,
      value: true,
    },
    showRange: { // 显示输入范围
      type: Boolean,
      value: true
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    focus: false, // 当前是否获取到焦点
    inputValue: '', // 正在输入的内容的值
    equation: '', // 计算过程中的值
    result: 0, // 计算结果
    mathSymbol: '', // 计算的数学符号
    customInputWidth: 0, // input输入框宽度
    inputValueStyle: 'justify-content: center;', // input内容样式
    fullHeight: '1100rpx', // 页面高度
  },

  observers: {
    value () {
      this.getShowStyle()
    },
    autoFocus (autoFocus) {
      if (autoFocus == true) {
        this.tapInput()
      }
    },
  },

  lifetimes: {
    attached () {
      let systemInfo = getSystemInfoSync()
      let height = systemInfo.windowHeight + 'px'
      this.setData({
        fullHeight: height
      })
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 点击获取焦点
     */
    tapInput() {
      let {
        value,
        disabled,
        handleTap,
        resetData
      } = this.data
      if (handleTap) {
        this.triggerEvent('tap', {})
      }
      if (disabled) {
        return
      }
      if (resetData) {
        this.reset()
      } else {
        this.setData({
          result: value || '',
          inputValue: value || ''
        })
      }
      this.setData({
        focus: true
      })
    },
    /**
     * 点击键盘按钮
     * @param {*} e 
     */
    tapKey(e) {
      let keyValue = e.currentTarget.dataset.value
      let {
        inputValue,
        equation,
        result,
        mathSymbol,
      } = this.data
      console.log({
        keyValue,
        inputValue,
        equation,
        result,
        mathSymbol,
      })
      // 清零
      if (keyValue == 'clear') {
        inputValue = 0
        mathSymbol = ''
        equation = ''
      }
      // 删除按钮
      else if (keyValue == 'delete') {
        inputValue = inputValue.substr(0, inputValue.length - 1)
        // 如果存在计算好的数据，则删除完当前输入后，将之前的内容改到输入框
        if (equation) {
          if (inputValue == '' || inputValue == '0') {
            try {
              inputValue = equation.toString()
            } catch (e) {
              inputValue = 0
            }
            equation = ''
            mathSymbol = ''
          }
        } else {
          if (inputValue == '') {
            inputValue = '0'
          }
        }
      } else if (keyValue == '+' || keyValue == '-' || keyValue == 'x' || keyValue == '÷') {
        // 点击数学运算符
        if (!equation) { // 没有数据时，默认以0为原数据
          equation = 0
        }
        if (mathSymbol == '÷' || mathSymbol == '/') {
          if (inputValue == 0) {
            alert('0不能作为被除数')
            return
          }
        }
        result = calculation(equation, mathSymbol, inputValue)
        equation = result
        inputValue = '0'
        mathSymbol = keyValue
      } else if (keyValue == '.') {
        // 点击小数点
        // 如果值为空，则应当为 0.
        if (inputValue == '') {
          inputValue = '0'
        }
        inputValue += keyValue
      } else {
        // 点击数字
        if (inputValue == '0') {
          inputValue = keyValue
        } else {
          inputValue += keyValue
        }
      }
      this.setData({
        inputValue,
        equation,
        mathSymbol,
        result
      })
    },
    /**
     * 点击空白区域隐藏键盘，不计算当前输入
     */
    hideKeyboard () {
      this.setData({
        inputValue: '',
        focus: false
      })
      this.triggerEvent('blur', {
        value: this.data.value
      })
    },
    /**
     * 阻止默认事件
     */
    nothing () {},
    /**
     * 点击确定
     * @param {*} e 
     */
    confirm () {
      let {
        max,
        min
      } = this.data
      let {
        result,
        inputValue,
        equation,
        mathSymbol,
      } = this.data
      if (inputValue == '' || inputValue == '0') {
        // 如果输入内容数据为0，则结果值改为0
        if (!equation) {
          result = 0
        }
      } else {
        // 存在输入内容，则确定时还要把最后的内容计算一遍
        result = calculation(equation, mathSymbol, inputValue)
      }
      equation = ''
      inputValue = '0'
      mathSymbol = ''
      let value = '0'
      // 限定输入范围
      max = parseFloat(max)
      min = parseFloat(min)
      if (result > 0) {
        if (result < min) {
          result = min
        } else if (result > max) {
          result = max
        }
      }
      try {
        value = result.toString()
      } catch (e) {
        value = 0
      }
      this.setData({
        result,
        equation,
        inputValue,
        mathSymbol,
        focus: false
      })
      // 输入完成触发input和blur方法
      this.triggerEvent('input', {
        value: value
      })
      this.triggerEvent('blur', {
        value: value
      })
    },
    /**
     * 计算input的显示方式
     * 
     * 如果内容大于input区域，则文字居右显示
     */
    getShowStyle: async function () {
      let inputWidth = await this.getInputWidth()
      let valueWidth = await this.getValueWidth()
      if (valueWidth >= inputWidth) {
        this.setData({
          inputValueStyle: 'justify-content: flex-end;'
        })
      } else {
        this.setData({
          inputValueStyle: 'justify-content: center;'
        })
      }
    },
    /**
     * 获取input内容区域的宽度
     */
    getInputWidth () {
      let that = this
      return new Promise((resolve) => {
        if (that.data.customInputWidth) {
          resolve(that.data.customInputWidth)
          return
        }
        let query = this.createSelectorQuery()
        query.select('#custom-input .content').fields({
          size: true
        }).exec((res) => {
          if (res[0]) {
            that.setData({
              customInputWidth: res[0].width
            })
          }
          resolve(that.data.customInputWidth)
        })
      })
    },
    /**
     * 获取输入内容的宽度
     */
    getValueWidth () {
      return new Promise((resolve) => {
        let query = this.createSelectorQuery()
        query.select('#value').fields({
          size: true
        }).exec((res) => {
          if (res[0]) {
            resolve(res[0].width)
          } else {
            resolve(0)
          }
        })
      })
    },
    /**
     * 重置数据
     */
    reset () {
      this.setData({
        inputValue: '', // 正在输入的内容的值
        equation: '', // 计算过程中的值
        result: 0, // 计算结果
        mathSymbol: '', // 计算的数学符号
      })
    },
  }
})